<template>
  <div class="container-whi-note-datail">
    <el-dialog
      :title="dialogConfig.name"
      :visible.sync="dialogVisible"
      @close="dialogVisible = false"
      append-to-body
    >
      <!-- <el-form ref="formRef" :model="formData" :rules="rules">
        <el-form-item label="机器人uid" :label-width="'100px'" prop="name">
          <el-input v-model="formData.objectId" autocomplete="off"></el-input>
        </el-form-item>

        <el-form-item label="内容" :label-width="'100px'" prop="link">
          <el-input v-model="formData.content" autocomplete="off"></el-input>
        </el-form-item>
      </el-form> -->

      <!-- 个人资料 -->
      <div class="detail">
        <div class="avatar">
          <img :src="detailData.avatar | imageUrl" alt="" />
          <span>{{ detailData.nickname }}</span>
        </div>
        <div>性别：{{ detailData.gender == 1 ? '男' : '女' }}</div>
        <div>内容ID：{{ detailData.id }}</div>
        <div class="time">
          发布时间： {{ detailData.createTime | parseTime }}
        </div>
      </div>

      <!-- 内容 -->
      <div class="detail-content">
        <div class="text">
          <span>文字内容</span>
          {{ detailData.content }}
        </div>
      </div>

      <!-- 回复 -->
      <div class="reply" v-if="replyList.length > 0">
        <span class="title">回复：</span>
        <div v-for="(item, index) in replyList" :key="index" class="reply-box">
          <div class="avatar">
            <img :src="item.avatar | imageUrl" alt="" />
            <span>{{ item.nickname }}</span>
          </div>
          <div class="content">
            {{ item.replyContent }}
          </div>
          <div class="time">
            <!-- 2023-04-27 10:34:56 -->
            {{ item.createTime | parseTime }}
          </div>
        </div>
      </div>
      <el-pagination
        :current-page="currentPage"
        @current-change="handleCurrentChange"
        :page-size="pagesize"
        layout="prev, pager, next"
        :total="total"
        v-if="replyList.length > 0"
      >
      </el-pagination>

      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="handleConfirm">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { deepClone } from '@/utils'
import { noteDetailApi, noteReplyListApi } from '@api/whisper'
export default {
  components: {},
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    value: {
      type: Object
    },
    request: {
      type: Object
    },
    dialogConfig: {
      type: Object
    }
  },
  data() {
    return {
      posting: false,
      formData: this.setup(this.value),
      rules: {},
      detailData: {},
      replyList: [],
      limit: 8,
      pagesize: 8, // 每页的数据
      total: null,
      currentPage: 1 // 初始页
    }
  },
  created() {},
  mounted() {
    this.fatchReply()
  },
  methods: {
    setup() {
      if (this.value) {
        console.log('this.value', this.value.id)
        this.handleDetail(this.value.id)
      }
    },
    handleDetail(id) {
      this.posting = true
      noteDetailApi(id)
        .then(res => {
          console.log('res----', res)
          if (res.data) {
            this.detailData = res.data
            this.replyList = res.data.replyPageInfo.list
            this.fatchReply()
          }
        })
        .catch(err => {
          this.$message('error')
        })
    },
    handleConfirm() {
      this.dialogVisible = false
    },
    handleCurrentChange(val) {
      this.currentPage = val // 点击第几页
      this.fatchReply()
    },
    fatchReply() {
      let params = {
        secretId: this.value.id,
        page: this.currentPage,
        limit: this.limit
      }
      // 实时对话内容
      noteReplyListApi(params).then(res => {
        if (res.data) {
          console.log('this.chatList', res.data)
          this.total = res.data.total
          this.replyList = res.data.list
        }
      })
    }
  },
  watch: {
    visible(val) {
      if (val) {
        this.formData = this.setup()
      } else {
        this.currentPage = 1
      }
    }
  },
  computed: {
    dialogVisible: {
      get() {
        return this.visible
      },
      set(val) {
        this.$emit('update:visible')
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.container-whi-note-datail {
}
.time {
  display: flex;
  align-items: center;
}
.avatar {
  display: flex;
  align-items: center;
  color: #000;
  font-size: 16px;
  > img {
    display: inline-block;
    width: 45px;
    height: 45px;
    margin-right: 10px;
    border-radius: 50%;
  }
  > span {
    font-size: 18px;
    font-weight: 600;
    color: #000;
  }
}
::v-deep .el-dialog__body {
  .detail {
    color: #333;
    line-height: 18px;
    font-size: 15px;
    > div {
      margin: 10px 0;
      padding-left: 55px;
    }
    .avatar {
      padding-left: 0;
    }
  }
  .detail-content {
    width: 100%;
    min-height: 40px;
    margin: 40px 0;
    .text {
      width: 100%;
      font-size: 15px;
      > span {
        display: block;
        margin-bottom: 10px;
        font-size: 16px;
        font-weight: 600;
        color: #000;
      }
    }
  }
  .reply {
    .title {
      display: block;
      margin: 10px 0 15px 0;
      color: #000;
      font-size: 16px;
      font-weight: 600;
    }
    .reply-box {
      margin-top: 15px;
    }
    .avatar {
      > img {
        width: 35px;
        height: 35px;
      }
      > span {
        font-size: 15px;
        font-weight: 500;
      }
    }
    .content {
      width: 100%;
      margin: 10px 0;
      font-size: 15px;
      padding-left: 45px;
    }
    .time {
      color: #b66aff;
      padding-left: 45px;
    }
  }
}
</style>
